<template>
  <div class="main">
    <div id="main" class="pie-wrap"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
require('echarts/theme/shine');//引入主题
import { findProfitAndLossRatePictureData } from '@/api/analysis_api.js';
export default {
  data() {
    return {
      chart: {},
      /**
       * echarts 配置项
       */
      /**
       * 折线图数据
       */
      lineData: {},
      /**
       * 折线图的配置
       */
      option: {},
      /**
       * 训练名称
       */
      trainingName: "",
    }
  },
  mounted() {
    this.trainingName = this.$route.query.name;
    if (this.trainingName != undefined && this.trainingName != "") {
      // 初始化折线图
      this.initChart();
    } else {
      console.warn(`参数name为${this.trainingName}`);
    }
  },
  methods: {
    /**
     * 初始化echarts配置
     */
    _initOption() {
      this.option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['收益率']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            data: this.lineData.DateArray,
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            name: '百分比'
          }
        ],
        series: [
          {
            name: '收益率',
            type: 'line',
            stack: '收益率',
            data: this.lineData.ProfitAndLossRateArray,
          }
        ]
      };
    },
    /**
     * 初始化折线图
     * @param func 
     */
    initChart(func) {
      // 获取数据
      let res = findProfitAndLossRatePictureData(this.trainingName);
      // 解析数据
      this.lineData = res.data.Result;
      // 初始化echarts配置
      this._initOption();
      // 生成echarts的折线图
      let chartDom = document.getElementById('main');
      this.chart = echarts.init(chartDom, 'shine');
      this.chart.setOption(this.option);
    },
  },
}
</script>
<style lang='css' scope>
.main {
  /* background-color: #e9eef3; */
  background-color: white;
}

.pie-wrap {
  width: 100%;
  height: 400px;
}
</style>
